<template>
  <div class="fh-text-link">
    <template v-for="(item, index) of textArr" :key="index">
      <div class="item">
        <span class="title">{{ item.title }} : </span>
        <el-link type="primary">{{ item.desp }}</el-link>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { ItextArr } from '../types'

defineProps<{
  textArr: ItextArr[]
}>()
</script>

<style lang="less" scoped>
.fh-text-link {
  padding: 0 15px;
  margin-bottom: 40px;
  text-align: left;
  .item {
    padding: 5px 0;
    .title {
      position: relative;
    }
    // 小黑点的实现
    // 注意用定位来调整位置
    .title::before {
      position: absolute;
      top: 40%;
      left: -15px;
      width: 5px;
      height: 5px;
      background: black;
      border-radius: 100%;
      content: '';
    }
  }
}
</style>
